<template>
  <app-portal-global-layout @dynamicRouterShow="dynamicRouterShow" @reloadPortlet="reloadPortlet">
    <transition name="page-toggle">
      <div style="height: calc(100vh - 80px);" class="main">
        <router-view v-if="isRouterAlive" :key="$route.fullPath"/>
        <component
          :meta="$route.meta"
          :is="$route.meta.componentName"
          v-if="$route.meta.isIframe"
        ></component>
      </div>
    </transition>
  </app-portal-global-layout>
</template>

<script>

import Vue from 'vue'
import AppPortalGlobalLayout from './AppPortalGlobalLayout'
import {mixin, mixinDevice} from '@/utils/mixin.js'
import {INDEX_MAIN_PAGE_PATH} from '@/store/mutation-types'

const indexKey = INDEX_MAIN_PAGE_PATH

export default {
  name: 'AppPortalTabLayout',
  components: {
    AppPortalGlobalLayout,
  },
  mixins: [mixin, mixinDevice],
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide(){
    return{
      closeCurrent:this.closeCurrent,
      addRouter: this.addRouter,
    }
  },
  created() {
    let storeKey = 'route:title:' + this.$route.fullPath
    let routeTitle = this.$ls.get(storeKey)
    if (routeTitle) {
      this.$route.meta.title = routeTitle
    }
    Vue.prototype.dynamicRouterShow = this.dynamicRouterShow
  },
  methods: {
    addRouter() {
      // 不支持这种模式
      return false
    },
    closeCurrent(){
      this.$router.push('/index/portal').catch(err => {})
    },
    changeTitle(title) {
      let projectTitle = window._CONFIG.full_name || this.$t('m.logo.full_name')
      // 首页特殊处理
      if (this.$route.path === indexKey) {
        document.title = projectTitle
      } else {
        document.title = title + ' · ' + projectTitle
      }
    },
    dynamicRouterShow(key, title) {
      this.changeTitle(title)
    },
    reloadPortlet() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
